<template>
    <el-dialog class="dialog" :destroy-on-close="true" title="开闭状态" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label="梯控名称：" prop="door_name">
                {{ formData.door_name }}
            </el-form-item>
            <el-form-item label="授权楼层：" prop="ladder_port">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="formData.ladder_port" size="medium">
                    <el-checkbox-button v-for="item in portData" :label="item.port_sn" :key="item.port_sn"
                        :value="item.port_sn">{{ item.remark }}</el-checkbox-button>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="开闭状态" prop="port_status">
                <el-select v-model="formData.port_status" placeholder="请选择开闭状态">
                    <el-option v-for="item in statusData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmitBefore">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from 'vuex-class';
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { mixinNext } from '@/mixin/Next';
@Component({
    mixins: [mixinDialogForm, mixinNext]
})
export default class portStatusForm extends Vue {
    @Action("equipmentLadder/portStatus") itemEdit: any;

    editInit(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
        me.remoteMethod(data.door_sn);
    }
    isIndeterminate: any = true;
    checkAll: any = false;

    handleCheckAllChange(val) {
        const me = this as any;
        if (val) {
            me.portData.forEach((item) => {
                me.formData.ladder_port.push(item.port_sn);
            })
        } else {
            me.formData.ladder_port = [];
        }
        me.isIndeterminate = false;

    }
    @Action('equipmentLadder/portList') getPort: any;
    portData: any = [];
    remoteMethod(door_sn) {
        const me = this as any;
        me.getPort({ door_sn: door_sn, per_page: 100  }).then(({ data }) => {
            me.portData = data;
        });
    }
    onSubmitBefore() {
        const me = this as any,
            formData = me.formData;
        formData.port_sn_str = formData.ladder_port.toString();
        me.onSubmit();
    }

    // 表单数据
    formData: any = {
        ladder_port: [],
        door_name: "",
        port_sn_str: "",
        port_status: ""
    };
    statusData: any = [
        { label: '启用', value: 1 },
        { label: '禁用', value: 2 }
    ];
    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        ladder_port: [
            {
                required: true,
                message: "请选择梯控楼层",
                trigger: "blur"
            }
        ],
        port_status: [
            {
                required: true,
                message: "请选择开闭状态",
                trigger: "blur"
            }
        ]
    };
}
</script>